<!--
 * @company : 版权所属 四川北星惯牌科技有限公司
 * @contact : 刘经理 19326416371
 -->
<template>

	<l-painter :board="painter" ref="painterView" isCanvasToTempFilePath @success="successPoster" hidden />
	<view class="sharePop-box ">
		<!-- 海报 -->
		<view class="poster-img" v-if="posterShow">
			<up-image bgColor="#2B2F33" :src="path" width="622rpx" height="920rpx" mode="widthFix">
				<template v-slot:loading>
					<up-loading-icon color="#7BDECC"></up-loading-icon>
				</template>
			</up-image>
		</view>
		<!-- 内容 -->
		<view class="share-box flex-row-center">
			<button open-type="share" class="share-item flex-center" @click="shareWechat">
				<view class="icon-box flex-center">
					<up-icon name="weixin-fill" color="#59DE8E" size="28"></up-icon>
				</view>
				<text class="text">分享微信</text>
			</button>

			<view class="share-item flex-center" @click="savePictures()">
				<view class="icon-box flex-center">
					<up-icon name="photo" color="#2979ff" size="28"></up-icon>
				</view>
				<text class="text">保存图片</text>
			</view>
		</view>
		<view class="share-box-footer flex-center" @click="closePop">
			<text class="text">取消</text>
		</view>
	</view>
</template>

<script setup>
	import {
		computed
	} from 'vue';
	import {
		posterFun
	} from '@/utils/painterFun.js';
	import {
		savePicturesFun
	} from '@/utils/savePictures.js';
	const props = defineProps({
		groupInfo: {
			default: null
		}
	})
	const groupInfo = ref(computed(() => props.groupInfo));
	const path = ref('')
	const imgShow = ref(false);
	const painter = ref(null);
	const posterShow = ref(false)
	const painterView = ref(null);
	const emit = defineEmits(['closeShare', 'shareWechat'])
	onMounted(() => {

	})
	const closePop = () => {
		// posterShow.value = false;
		emit('closeShare')
	}
	const successPoster = (e) => {
		// console.log('图片生成shiba：', e);
		path.value = e
	}
	const shareWechat = () => { //分享微信
		emit('shareWechat')
	};
	const toPath = () => { //生产图片
		let status = '正在组队'
		if (groupInfo.value.customStatus == 0) {
			status = '未开始'
		} else if (groupInfo.value.customStatus == 1) {
			status = '正在组队'
		} else if (groupInfo.value.customStatus == 2) {
			status = '已结束'
		}
		// const avatarGroup = [
		// 	'https://cdn.uviewui.com/uview/album/1.jpg',
		// 	'https://cdn.uviewui.com/uview/album/2.jpg',
		// 	'https://cdn.uviewui.com/uview/album/3.jpg',
		// 	'https://cdn.uviewui.com/uview/album/4.jpg',
		// 	'https://cdn.uviewui.com/uview/album/5.jpg',
		// ]
		painter.value = posterFun({
			mainBackground: groupInfo.value.imageList[0],
			mpCode: groupInfo.value.mpCode,
			timeTips: groupInfo.value.endDate ? `组队时间${groupInfo.value.endDate}` : '组队进行中',
			address: groupInfo.value.address,
			status,
			peopleTips: `${groupInfo.value.join_number}人正在组队`,
			title: groupInfo.value.title,
			price: `￥ ${groupInfo.value.cost}`
		})
		posterShow.value = true;
	}
	const savePictures = (url) => { //保存图片
		painterView.value.canvasToTempFilePathSync({
			fileType: "jpg",
			// 如果返回的是base64是无法使用 saveImageToPhotosAlbum，需要设置 pathType为url
			pathType: 'url',
			success: (res) => {
				console.log(res.tempFilePath);
				//保存图片
				savePicturesFun(res.tempFilePath)
				// 非H5 保存到相册

			},
		})
	}
	defineExpose({
		toPath
	})
</script>

<style lang="scss" scoped>
	.image-box {
		width: 750rpx;
		height: 540rpx;
		// border: 1px solid red;
	}

	.sharePop-box {
		width: 750rpx;
		background: #222528;
		position: relative;
		border-radius: 18rpx 18rpx 0rpx 0rpx;

		.share-box {
			width: 100%;
			justify-content: space-evenly;
			padding: 32rpx 0;

		}

		.share-item {
			flex-direction: column;
			background-color: transparent;
			margin: 0;
			padding: 0;

			.icon-box {
				width: 96rpx;
				height: 96rpx;
				border-radius: 50%;
				background-color: #404040;
			}

			.text {
				font-weight: 500;
				font-size: 24rpx;
				color: rgba(255, 255, 255, 0.6);
				margin-top: 12rpx;
				line-height: 32rpx;

			}
		}

		.share-box-footer {
			width: 100%;
			height: 112rpx;
			box-sizing: border-box;
			border-top: 8rpx solid #1A1C1F;

			.text {
				font-weight: 500;
				font-size: 34rpx;
				color: rgba(255, 255, 255, 0.87);
			}
		}
	}

	.poster-img {
		width: 622rpx;
		height: 920rpx;
		// border: 1px solid red;
		position: fixed;
		top: 42rpx;
		left: 50%;
		transform: translateX(-50%);
	}
</style>